<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用于事件</title>
</head>
<body>

<div id="example"></div>


<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>
<script type="text/babel">
    /*
    需求: 自定义组件, 功能说明如下:
      1. 界面如果页面所示
      2. 点击按钮, 提示第一个输入框中的值
      3. 当第2个输入框失去焦点时, 提示这个输入框中的值
   */
    //定义组件
    class MyComponent extends React.Component {
        constructor(props) {
            super(props);
            //绑定自定义函数到组件对象上
            this.showInput = this.showInput.bind(this);
            this.handleBlur = this.handleBlur.bind(this);
        }

        showInput() {
            alert(this.msginput.value)
        }

        handleBlur(event) {
            alert(event.target.value)
        }

        render() {
            return (
                <div>
                    <input type="text" ref={input => this.msginput = input}/>&nbsp;
                    <button onClick={this.showInput}> 提示输入</button>
                    &nbsp;
                    <input type="text" placeholder="失去焦点后提示内容" onBlur={this.handleBlur}/>
                </div>
            )
        }
    }
    // 渲染组件标签
    ReactDOM.render(<MyComponent />, document.getElementById('example'))
</script>
</body>
</html>